<template>
	<view class="load-main">
		<view class="load-box">
			<view class="load-text">
				登录
			</view>

			<view class="load-choose">
				<view class="load-choosein">
					<view @tap='zhclick'>账号密码登录</view>
					<view @tap='sjclick'>手机登录</view>
				</view>

			</view>

			<view class="load-zhclass" v-if="loadtype==='zh'">
				<view class="load-input">
					<input type="text" class="inputtext" placeholder-class="load-place" placeholder="请输入账号" v-model="username" />
				</view>
				<view class="load-input">
					<input type="text" class="inputtext" password placeholder-class="load-place" placeholder="请输入密码" v-model="password" />
				</view>

				<view class="load-input">
					<view class="load-inputview">
						<input type="text" class="inputtext"  placeholder-class="load-place" placeholder="请输入验证码" v-model="vcode">
					</view>
					<view class="load-vcode">
						<image class="load-vcodeimg" v-bind:src="vcodesrc" @tap="getvcode"></image>
					</view>
				</view>
			</view>

			<view class="load-sjclass" v-if="loadtype==='sj'">
				<view class="load-input">
					<input type="text" class="inputtext"  maxlength="11" placeholder-class="load-place" placeholder="请输入手机号码"
						v-model="phonenumber" />
				</view>
				<view class="load-input">
					<input type="text" class="yzm-btn-input" placeholder-class="load-place" placeholder="请输入验证码"
						v-model="phoneyzm" />
					<button type="default" class="yzm-btn" v-bind:disabled="btndisabled"
						@tap="getyzm">{{yzmstr}}</button>
				</view>
			</view>


			<view class="load-button">
				<button class="load-button-style" type="warn" @tap="checklogin">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				vcode: '',
				vcodesrc: this.url + 'index/vcode',
				loadtype: 'zh',
				phonenumber: '',
				phoneyzm: '',
				yzmstr: '获取验证码',
				btndisabled: false
			}
		},
		onLoad() {

			var username = uni.getStorageSync('username');
			var userphone = uni.getStorageSync('userphone');


			if (username != '' && userphone != '') {
				uni.switchTab({
					url: '/pages/plan/plan'
				})
			}


		},
		methods: {
			timewait(t) {
				const _this = this;
				setTimeout(function() {
					if (t >= 0) {
						_this.yzmstr = t + 's后点击';
						t--;
						_this.timewait(t);
					} else {
						_this.yzmstr = '获取验证码';
						t = 60;
						_this.btndisabled = false;
					}
				}, 1000)
			},
			getyzm() {
				//验证手机号码是否合法
				if (!(/^1[13456789]\d{9}$/.test(this.phonenumber))) {
					uni.showToast({
						title: '手机号码不合规',
						icon: 'none'
					});
					return;
				}


				uni.request({
					url: this.url + 'login/sendmsg',
					method: 'GET',
					data: {
						phonenumber: this.phonenumber
					},
					success: res => {

						if (res.data.status == 'phoneerror') {
							uni.showToast({
								title: '手机号码不存在',
								icon: 'none'
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});

				this.timewait(60);
				this.btndisabled = true;
			},
			zhclick() {
				this.loadtype = 'zh'
			},
			sjclick() {
				this.loadtype = 'sj'
			},
			getvcode() {
				this.vcodesrc = this.url + 'index/vcode/' + Math.random();

			},
			checklogin() {
				uni.request({
					url: this.url + 'login/login',
					method: 'GET',
					data: {
						username: this.username,
						userpassword: this.password,
						vcode: this.vcode,
						phonenumber: this.phonenumber,
						phoneyzm: this.phoneyzm,
						loadtype: this.loadtype

					},
					success: res => {

						if (this.loadtype == 'zh') {
							if (res.data.status == 'vcodeerror') {
								uni.showToast({
									title: '验证码错误',
									icon: 'none'
								});
								return
							}
							if (res.data.status == 'ok') {
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});

								uni.setStorageSync('username', res.data.UserName + '');
								uni.setStorageSync('userphone', res.data.UserPhone + '');



								//跳转到每周计划界面,适合tabBar中的页面
								uni.switchTab({
									url: '/pages/plan/plan'
								});
							} else {
								uni.showToast({
									title: '用户名或密码错误',
									icon: 'none'
								});
							}
						} else { //手机验证码
							if (res.data.status == 'ok') {
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});

								uni.setStorageSync('username', res.data.UserName + '');
								uni.setStorageSync('userphone', res.data.UserPhone + '');


								//跳转到每周计划界面,适合tabBar中的页面
								uni.switchTab({
									url: '/pages/plan/plan'
								});
							} else {
								uni.showToast({
									title: '验证码错误',
									icon: 'none'
								});
							}

						}
					},
					fail: () => {},
					complete: () => {}
				});
			}

		}
	}
</script>
<style>
	.yzm-btn-input {
		padding-left: 20px;
		width: 70%;
	}

	.yzm-btn {
		font-size: 11px;
	}

	.load-zhclass {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 140px;

	}

	.load-sjclass {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100px;
	}

	.load-choose {
		display: flex;
		justify-content: center;
	}

	.load-choosein {
		display: flex;
		height: 30px;
		width: 70%;
		justify-content: space-between;
	}

	.load-inputview {
		width: 75%;
	}

	.load-vcodeimg {
		width: 88px;
		height: 32px;
	}

	.load-main {
		display: flex;
		justify-content: center;
	}

	.load-box {
		display: flex;
		width: 90%;
		height: 300px;
		flex-direction: column;
		justify-content: space-between;
	}

	.load-text {
		line-height: 40px;
		font-size: 25px;
	}

	.load-input {
		display: flex;
		border: 1px solid #cccccc;
		height: 40px;
		align-items: center;

	}

	.load-place {
		padding-left: 10px;
		font-size: 15px;
	}
	.inputtext{
		padding-left:20px;
	}
</style>
